<style scoped>
.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
  white-space: nowrap;
  display: inline-block;
}
.el-scrollbar__wrap {
  overflow-x: auto;
  height: calc(100% + 20px);
}
.topindexmeny {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>
<template>
  <div
    class="top"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <div class="topindexmeny">
      <IndexMenu />
    </div>
    <div class="menuaddfunction">
      <div class="videowav">
        <div class="videowavss">视频语音合成</div>
        <div class="videowavsss">使用视频与语音合成短视频</div>
        <div class="videowavssss">
          <el-button
            size="medium"
            round
            @click="dialogFormVisiblewav = true"
            class="videowavsssstext"
            >开始创作<svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantouyou"></use></svg
          ></el-button>
        </div>
      </div>
      <div class="videotext">
        <div class="videowavss">视频文字合成</div>
        <div class="videowavsss">使用视频与文本合成短视频</div>
        <div class="videowavssss">
          <el-button
            size="medium"
            round
            @click="dialogFormVisibletext = true"
            class="videowavsssstext"
            >开始创作<svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantouyou"></use></svg
          ></el-button>
        </div>
      </div>
    </div>
    <div class="centers">
      <el-main class="center">
        <h3 class="centertext">工程列表</h3>
        <div class="centerbox">
          <div class="centerboxnoe" @click="dialogFormVisible = true">
            <div class="centerzhonjian">
              <div class="reads">+</div>
              <span class="readtext">创 建 项 目</span>
            </div>
          </div>
          <div class="centerboxtow">
            <div v-for="item in project1" :key="item.uuidStr" class="project">
              <div v-if="item.status === 1">
                <div class="projectedit">
                  <div class="projecteditbox1">编辑中</div>
                  <el-button
                    @click="EditingVirtual(item)"
                    type="primary"
                    size="mini"
                    class="projecteditbox2"
                  >
                    前去编辑
                  </el-button>
                </div>
                <div class="diandiandian">
                  <div class="objtext">
                    <span class="projectname">{{ item.name }}</span
                    ><br />
                    <span class="times"
                      >创建时间：{{
                        new Date(item.createdAt).toLocaleDateString()
                      }}</span
                    >
                  </div>
                  <div @click="handleCommand(item, 'del')" class="deldels">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      size="small"
                      type="danger"
                    ></el-button>
                  </div>
                </div>
              </div>
              <div v-if="item.status === 2">
                <div
                  class="projectedit"
                  v-loading="true"
                  :element-loading-text="`人物嘴型视频合成中`"
                >
                  <div class="projecteditbox1">合成中</div>
                </div>
                <div class="diandiandian">
                  <div class="objtext">
                    <span class="projectname">{{ item.name }}</span
                    ><br />
                    <span class="times"
                      >创建时间：{{
                        new Date(item.createdAt).toLocaleDateString()
                      }}</span
                    >
                  </div>
                  <div @click="handleCommand(item, 'del')" class="deldels">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      size="small"
                      type="danger"
                    ></el-button>
                  </div>
                </div>
              </div>
              <div v-if="item.status === 3">
                <div
                  class="projectedit"
                  v-loading="true"
                  :element-loading-text="`项目视频合成中${
                    Math.ceil(
                      ((+new Date() - +new Date(item.updatedAt)) /
                        (item.finishTime * 1000 - +new Date(item.updatedAt))) *
                        100
                    ) >= 99
                      ? 99
                      : Math.ceil(
                          ((+new Date() - +new Date(item.updatedAt)) /
                            (item.finishTime * 1000 -
                              +new Date(item.updatedAt))) *
                            100
                        )
                  }%`"
                >
                  <div class="projecteditbox1">合成中</div>
                </div>
                <div class="diandiandian">
                  <div class="objtext">
                    <span class="projectname">{{ item.name }}</span
                    ><br />
                    <span class="times"
                      >创建时间：{{
                        new Date(item.createdAt).toLocaleDateString()
                      }}</span
                    >
                  </div>
                  <div @click="handleCommand(item, 'del')" class="deldels">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      size="small"
                      type="danger"
                    ></el-button>
                  </div>
                </div>
              </div>
              <div v-if="item.status === 5">
                <div class="projectedit">
                  <div class="projecteditbox1" style="color: red">合成失败</div>
                  <el-button
                    @click="Retryitem(item.id, item.status)"
                    type="danger"
                    size="mini"
                    class="projecteditbox2"
                  >
                    重新合成
                  </el-button>
                </div>
                <div class="diandiandian">
                  <div class="objtext">
                    <span class="projectname">{{ item.name }}</span
                    ><br />
                    <span class="times"
                      >创建时间：{{
                        new Date(item.createdAt).toLocaleDateString()
                      }}</span
                    >
                  </div>
                  <div @click="handleCommand(item, 'del')" class="deldels">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      size="small"
                      type="danger"
                    ></el-button>
                  </div>
                </div>
              </div>
              <div v-if="item.status === 6">
                <div class="projectedit">
                  <div class="projecteditbox1" style="color: red">合成失败</div>
                  <el-button
                    @click="Retryitem(item.id, item.status)"
                    type="danger"
                    size="mini"
                    class="projecteditbox2"
                  >
                    重新合成
                  </el-button>
                </div>
                <div class="diandiandian">
                  <div class="objtext">
                    <span class="projectname">{{ item.name }}</span
                    ><br />
                    <span class="times"
                      >创建时间：{{
                        new Date(item.createdAt).toLocaleDateString()
                      }}</span
                    >
                  </div>
                  <div @click="handleCommand(item, 'del')" class="deldels">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      size="small"
                      type="danger"
                    ></el-button>
                  </div>
                </div>
              </div>
              <div v-if="item.status === 7">
                <div
                  class="projectedit"
                  v-loading="true"
                  :element-loading-text="`排队中`"
                >
                  <div class="projecteditbox1">排队中</div>
                </div>
                <div class="diandiandian">
                  <div class="objtext">
                    <span class="projectname">{{ item.name }}</span
                    ><br />
                    <span class="times"
                      >创建时间：{{
                        new Date(item.createdAt).toLocaleDateString()
                      }}</span
                    >
                  </div>
                  <div @click="handleCommand(item, 'del')" class="deldels">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      size="small"
                      type="danger"
                    ></el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="projectall" @click="pushdemo">
              <span>更多作品</span
              ><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantouyou"></use>
              </svg>
            </div>
          </div>
        </div>
      </el-main>
      <el-main class="center">
        <h3 class="centertext">作品列表</h3>
        <div class="centerbox">
          <div class="centerboxtow">
            <div v-for="item in project2" :key="item.uuidStr" class="project">
              <div v-if="item.status === 4">
                <div class="projectvideo">
                  <video
                    :src="url + item.path"
                    width="100%"
                    height="100%"
                    controls
                  ></video>
                </div>
                <div class="diandiandian">
                  <el-dropdown
                    class="diandiandians"
                    @command="handleCommand(item, $event)"
                  >
                    <span class="el-dropdown-link">
                      <i slot="reference" class="el-icon-more"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="compile"
                        ><span class="downloadvideo"
                          >编辑</span
                        ></el-dropdown-item
                      >
                      <el-dropdown-item command="download"
                        ><span class="downloadvideo"
                          >下载</span
                        ></el-dropdown-item
                      >
                      <el-dropdown-item divided command="del"
                        ><span class="deltext">删除</span></el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>

                  <span class="projectname">{{ item.name }}</span
                  ><br />
                  <span class="times"
                    >创建时间：{{
                      new Date(item.createdAt).toLocaleDateString()
                    }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="projectall" @click="pushdemo">
            <span>更多作品</span
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantouyou"></use>
            </svg>
          </div>
        </div>
      </el-main>
    </div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="35%"
      :close-on-click-modal="false"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <span slot="title">
        <h3>项目信息</h3>
        <br />
        <h5>新建一个项目，请编辑项目名和项目描述</h5>
      </span>
      <div class="dialogform">
        <el-form :model="form" ref="ruleForm" :rules="rules">
          <el-form-item
            label="项目名称:"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="项目描述:"
            :label-width="formLabelWidth"
            prop="description"
            @keyup.enter.native="projectAdds('ruleForm')"
          >
            <el-input
              type="textarea"
              resize="none"
              :rows="8"
              v-model="form.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer bottoms">
        <el-button round @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="projectAdds('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormVisibletext"
      width="35%"
      :close-on-click-modal="false"
      v-loading="loadisngtext"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <span slot="title">
        <h3>项目信息</h3>
        <br />
        <h5>新建一个文字项目，请编辑项目名和项目描述</h5>
      </span>
      <div class="dialogform">
        <el-form :model="formtext" ref="ruleFormtext" :rules="rules">
          <el-form-item
            label="项目名称:"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="formtext.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="项目描述:"
            :label-width="formLabelWidth"
            prop="description"
            @keyup.enter.native="projectAdds('ruleFormtext')"
          >
            <el-input
              type="textarea"
              resize="none"
              :rows="8"
              v-model="formtext.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer bottoms">
        <el-button round @click="dialogFormVisibletext = false"
          >取 消</el-button
        >
        <el-button round type="primary" @click="projectAddstext('ruleFormtext')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormVisiblewav"
      width="35%"
      :close-on-click-modal="false"
      v-loading="loadingwav"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <span slot="title">
        <h3>项目信息</h3>
        <br />
        <h5>新建一个语音项目，请编辑项目名和项目描述</h5>
      </span>
      <div class="dialogform">
        <el-form :model="formwav" ref="ruleFormwav" :rules="rules">
          <el-form-item
            label="项目名称:"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="formwav.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="项目描述:"
            :label-width="formLabelWidth"
            prop="description"
            @keyup.enter.native="projectAddswav('ruleFormwav')"
          >
            <el-input
              type="textarea"
              resize="none"
              :rows="8"
              v-model="formwav.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer bottoms">
        <el-button round @click="dialogFormVisiblewav = false">取 消</el-button>
        <el-button round type="primary" @click="projectAddswav('ruleFormwav')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { mp4xiaz } from "@/utils/xiaz";
import {
  userProlist,
  userProAdd,
  userProdelete,
  getComposeCharacterMouth,
  compose,
  composeStatus,
  composeCharacterMouth,
  userProupdate,
} from "@/api/virtualhuman";
import IndexMenu from "@/components/menu/IndexMenu.vue";
export default {
  name: "HomeView",
  data() {
    return {
      loading: false,
      url: this.$store.getters["url/urls"],
      dialogFormVisible: false, //添加项目于弹出层
      dialogFormVisibletext: false, //添加文字视频功能
      dialogFormVisiblewav: false, //添加语音合成视频功能
      loadingwav: false,
      loadisngtext: false,
      formLabelWidth: "120px",
      form: {
        name: "",
        description: "",
      },
      formwav: {
        name: "",
        description: "",
      },
      formtext: {
        name: "",
        description: "",
      },
      projectlist: [],
      project1: [],
      project2: [],
      project3: [],
      url: this.$store.getters["url/urls"],
      rules: {
        name: [
          { required: true, message: "请输入项目名称", trigger: "change" },
        ],
        description: [
          { required: true, message: "请输入项目备注", trigger: "change" },
        ],
      },
      time: "",
    };
  },
  mounted() {
    this.userProlists();
    this.time = setInterval(() => {
      this.userProlists();
    }, 30000);
  },
  beforeDestroy() {
    //摧毁定时器
    clearInterval(this.time);
  },
  methods: {
    pushdemo() {
      this.$router.push("/demo");
    },
    userProlists() {
      //获取列表
      var obj = {
        pageIndex: 1,
        pageSize: 100,
        type: 2,
        status: 0,
      };
      userProlist(obj).then((res) => {
        if (res.code === 200) {
          this.projectlist = res.data.list;
          var arr1 = []; // 合成中和编辑中
          var arr2 = []; //成功
          var arr3 = []; //失败
          this.projectlist.forEach((element) => {
            if (element.status === 4) {
              arr2.push(element);
            } else if (
              element.status === 1 ||
              element.status === 2 ||
              element.status === 3 ||
              element.status === 5 ||
              element.status === 6 ||
              element.status === 7
            ) {
              arr1.push(element);
            } else {
              arr3.push(element);
            }
          });
          this.project1 = arr1.slice(0, 5);
          this.project2 = arr2.slice(0, 6);
          this.project3 = arr3;
          this.listnxun2(arr1.slice(0, 5));
          this.listnxun3(arr1.slice(0, 5));
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    listnxun2(list) {
      //轮询人物嘴型
      list.forEach((element) => {
        if (element.status === 2) {
          getComposeCharacterMouth({ projectId: element.uuidStr - 0 }).then(
            (res) => {
              if (res.code !== 200) {
                // setTimeout(() => {
                //   // this.listnxun2(list);
                // }, 30000);
              } else {
                this.listnxun2s(element.uuidStr - 0, res.data);
              }
            }
          );
        }
      });
    },
    listnxun2s(id, url) {
      console.log("嘴型合成完成");
      // compose({ projectId: id })
      //   .then(() => {
      //     this.loadingtext = 30;
      //   })
      //   .catch((err) => {
      //     this.$message({
      //       message: err.msg,
      //       type: "error",
      //     });
      //   });
    },
    listnxun3(list) {
      list.forEach((element) => {
        if (element.status === 3) {
          composeStatus({ projectId: element.uuidStr - 0 }).then((res) => {
            if (res.code !== 200) {
            } else {
              if (res.data.path === "") {
              } else {
              }
            }
          });
        }
      });
    },
    //添加正常项目
    projectAdds(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          var obj = {
            type: 2,
            proKind: 1,
            userProjectInfo: {
              userid: this.$store.getters["user"].user.user_id, //用户id
              distinguishability: 1, //1是16：9，2是9：16
              uuid: 0,
              text: "", //总文字
              name: this.form.name, //项目名字
              bgMusic: "", // 背景音乐
              path: "", //目标生成地址
              level: 1, //视频质量 自动 - 1   流畅 -2   清晰 -3     高清 -4
              subtitle: 2, //是否开启字幕 1是 2否
              character: {
                uuid: 10096, //人物id已确认
                video: "static/uploadfile/virtual/people/52843818879.mp4", //人物视频
                staticImg: "static/uploadfile/virtual/people/52843818879.png", // 人物图片已确认
                name: "小美—站", //人物名字已确认
                type: 2, //人物type已确认
                voiceName: "", //name_show 音色已经确认
                voiceId: 0, //语音id
                tonename: "", // 音色已经确认
                width: 225, //人物宽度已确认
                height: 300, //人物高度已确认
                X: 259, //人物坐标已经确认
                Y: 141, //人物top坐标确认
                lipsVideo: "", // 人物合成嘴型的视频2变3用
              },
              ppt: {
                //ppt
                uuid: 0, //pptId
                maxNum: 1, // ppt多少页已确认
                name: "", // ppt名字已确认
                tts: "", //音频
                istts: 2, //是否为全局录音 1是 ， 2否
                pages: [
                  {
                    duration: 1000, //没意义
                    icon: "", //没意义
                    img: "", //图片已确认
                    switchType: "", //没意义
                    text: "", //当页的文字
                    textdome: "",
                    dome: [],
                    tts: "", //音频
                    video: "", //视频
                    isSound: 1, //是否开启声音1是2否
                    isVideo: 2, // 是否有视频1是2否
                    index: 0, // 下标
                    textureList: [],
                  },
                ],
              },
              scene: {
                icon: "static/uploadfile/virtual/scene/193789497455153152.jpg", //背景图已确认
                name: "演播大厅-10000", //背景图名字已确认
                backWidth: 960, //背景图片的宽已确认
                backHeight: 540, //背景图片的高已确认
                type: 1, // 背景图类型已确认
                pptWidth: 294, //电视的高已确认
                pptHeight: 168, //电视的高已确认
                pptX: 586, //电视的位置已确认
                pptY: 162, //电视的位置已确认
              },
            },
            ...this.form,
            original: 1,
          };
          userProAdd(obj)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.dialogFormVisible = false;
                this.form.name = "";
                this.form.description = "";
                this.loading = false;
                this.$router.push({
                  path: "/video",
                  query: {
                    videoid: res.data,
                  },
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
                this.loading = false;
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //生成语音视频项目
    projectAddswav(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingwav = true;
          var obj = {
            type: 2,
            proKind: 2,
            userProjectInfo: {
              userid: this.$store.getters["user"].user.user_id, //用户id
            },
            ...this.formwav,
            original: 1,
          };
          userProAdd(obj)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.formwav.name = "";
                this.formwav.description = "";
                this.dialogFormVisiblewav = false;
                this.loadingwav = false;
                this.$router.push({
                  path: "/prowav",
                  query: {
                    videoid: res.data,
                  },
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
                this.loadingwav = false;
              }
            })
            .catch(() => {
              this.loadingwav = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    projectAddstext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadisngtext = true;
          var obj = {
            type: 2,
            proKind: 3,
            userProjectInfo: {
              userid: this.$store.getters["user"].user.user_id, //用户id
            },
            ...this.formtext,
            original: 1,
          };
          userProAdd(obj)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.formtext.name = "";
                this.formtext.description = "";
                this.dialogFormVisiblewav = false;
                this.loadisngtext = false;
                this.$router.push({
                  path: "/protext",
                  query: {
                    videoid: res.data,
                  },
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
                this.loadisngtext = false;
              }
            })
            .catch(() => {
              this.loadisngtext = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCommand(val, $event) {
      //删除项目
      if ($event === "del") {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let obj = {
              projectId: val.uuidStr - 0,
              source: 1,
            };
            userProdelete(obj).then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.userProlists(); //再渲染一遍对应列表
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if ($event === "download") {
        mp4xiaz(this.url + val.path, val.name);
      } else if ($event === "compile") {
        userProupdate({
          projectId: val.id,
          status: 1,
          original: 2,
          userProjectInfo: "",
        }).then((res) => {
          this.$router.push({
            path: "/video",
            query: {
              videoid: val.id - 0,
            },
          });
        });
      }
    },
    EditingVirtual(item) {
      //编辑项目
      if (item.proKind === 1) {
        this.$router.push({
          path: "/video",
          query: {
            videoid: item.uuidStr,
          },
        });
        //让菜单出现工作台
        this.$store.commit("routerpush/ROUTERALTER", item.uuidStr);
      } else if (item.proKind === 2) {
        this.$router.push({
          path: "/prowav",
          query: {
            videoid: item.uuidStr,
          },
        });
      } else if (item.proKind === 3) {
        this.$router.push({
          path: "/protext",
          query: {
            videoid: item.uuidStr,
          },
        });
      }
    },
    Retryitem(id, status) {
      if (status === 5) {
        composeCharacterMouth({ projectId: id }).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.userProlists();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (status === 6) {
        compose({ projectId: id }).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.userProlists();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    prowav() {
      this.$router.push("/prowav");
    },
    protext() {
      this.$router.push("/protext");
    },
  },
  components: { IndexMenu },
};
</script>

<style lang="scss" scoped>
.menuaddfunction {
  height: 20vh;
  width: 95.5%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  & > div {
    float: left;
    width: 15%;
    height: 60%;
    border-radius: 15px;
    margin-top: 1.5%;
    margin-right: 2%;
    background-color: #ffffff;
    padding: 1%;
  }
  .videotext {
    background-image: url("@/assets/banner/img_banner02.jpg");
    background-repeat: no-repeat;
    // background-position: -1px -0px;
    background-size: 1000px 400px;
    position: relative;
    .videowavss {
      text-align: left;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }
    .videowavsss {
      text-align: left;
      font-size: 14px;
      color: #fff;
      line-height: 35px;
    }
    .videowavssss {
      position: absolute;
      bottom: 20px;
      right: 20px;
      .videowavsssstext {
        color: #434afa;
        text-shadow: 0px 0px 1px #434afa;
      }
    }
  }
  .videowav {
    background-image: url("@/assets/banner/img_banner03.jpg");
    background-repeat: no-repeat;
    background-position: -515px -80px;
    position: relative;
    .videowavss {
      text-align: left;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }
    .videowavsss {
      text-align: left;
      font-size: 14px;
      color: #fff;
      line-height: 35px;
    }
    .videowavssss {
      position: absolute;
      bottom: 20px;
      right: 20px;
      .videowavsssstext {
        color: #434afa;
        text-shadow: 0px 0px 1px #434afa;
      }
    }
  }
}
.projectall {
  display: flex;
  align-items: center;
  // border: 1px #000 solid;
  height: 132px;
  color: #696f7a;
  width: 55px;
  padding-left: 10px;
  border-radius: 10px;
  background: #eff2f5;
  span {
    font-weight: 200;
    width: 30px;
  }
  &:hover {
    cursor: pointer;
  }
}
.bottoms {
  margin: 0 auto;
  width: 200px;
}
.top {
  background-color: #f3f4f5;
  height: 100vh;
  overflow-y: auto;
  .centers {
    margin: 0 40px;
    box-sizing: border-box;
    .el-carousel {
      width: 100%;
      // margin: 0 auto;
    }
    .center {
      margin: 20px 0;
      width: 100%;
      height: 270px;
      background-color: #fff;
      .centertext {
        float: left;
        border-left: 3px solid #434af9;
        padding-left: 5px;
        text-align: 5px;
        margin: 0;
      }
      .centerbox {
        margin-top: 20px;
        float: left;
        width: 100%;
        height: 80%;
        flex-wrap: nowrap;
        display: flex;
        justify-content: flex-start;
        & > div {
          margin-right: 20px;
        }
        .centerboxnoe {
          flex-shrink: 0;
          width: 180px;
          height: 128px;
          background-color: #e9eeff;
          cursor: pointer;
          border-radius: 15%;
          border: 3px dashed #434af9;
          position: relative;
          .centerzhonjian {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -32px;
            margin-top: -23.5px;
            .reads {
              font-size: 20px;
              text-align: center;
              line-height: 20px;
              font-weight: 900;
              color: #434af9;
              border-radius: 50%;
              border: 3px solid #434af9;
              width: 20px;
              height: 20px;
              margin: 0 auto;
            }
            .readtext {
              text-align: center;
              color: #434af9;
            }
          }
        }
        .centerboxtow {
          height: 200px;
          overflow-x: auto;
          display: flex;
          justify-content: flex-start;
          & > div {
            margin-right: 20px;
          }
          .project {
            width: 232px;
            height: 132px;
            .projectvideo {
              box-sizing: border-box;
              width: 232px;
              height: 132px;
              background-color: #fff;
              &:hover {
                border: 2px solid #409eff;
              }
            }
            .projectedit {
              width: 232px;
              height: 132px;
              background-color: #000;
              position: relative;
              .projecteditbox1 {
                border-radius: 0 0 0 30%;
                color: #fff;
                text-align: center;
                line-height: 25px;
                font-size: 12px;
                width: 50px;
                height: 25px;
                background-color: #007999;
                float: right;
              }
              .projecteditbox2 {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -30px;
                margin-top: -13px;
              }
            }
            .diandiandian {
              margin-top: 5px;
              text-align: left;
              .objtext {
                float: left;
              }
              .deldels {
                float: right;
              }
              .diandiandians {
                float: right;
                transform: rotate(90deg);
              }
              .projectname {
                color: #303133;
                font-size: 14px;
                font-weight: 600;
                text-align: left;
                display: inline-block;
                width: 200px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .times {
                color: #c8c8c9;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
.deltext {
  color: red;
}
.right {
  float: right;
  line-height: 60px;
  margin-right: 10px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.dialogform {
  width: 90%;
}
.el-icon-more {
  color: #409eff;
}
</style>